<template>
    <div>
        <div id="head">
            <div>{{citys[area].name}}社保公积金一键购买</div>
            <router-link to="/consult/1/账号注册" tag="div">一键购买</router-link>
        </div>
        <div id="counter">
            <div>社保公积金计算器</div>
            <Area :cname="citys[area].name" @prov="prov" @city="city" @house="house"/>
            <input id="base" v-model="para.insuranceBase" type="text" placeholder="社保五险基数">
            <div class="tip">基数范围{{insuranceBaseMin}} ~ {{insuranceBaseMax}}</div>
            <div class="iscpf" @click="tiscpf()" :class="{checked: para.iscpf, able: able}">是否缴纳公积金</div>
            <input id="fu" v-show="para.iscpf" v-model="para.cpfBase" type="text" placeholder="社保-公积金基数">
            <div class="tip" v-show="para.iscpf">基数范围{{cpfBaseMin}} ~ {{cpfBaseMax}}</div>
            <div class="calc" @click="calc">计算</div>
        </div>
        <div id="result" v-if="data">
          <div>计算结果</div>
          <div class="ritem">
            <div>类型<br>（基数）</div>
            <div>个人缴<br>纳比例</div>
            <div>个人缴<br>纳金额</div>
            <div>公司缴<br>纳比例</div>
            <div>公司缴<br>纳金额</div>
          </div>
          <div class="ritem" v-for="e in data.planAllDetails">
            <div>{{e.name}}<p class="gey">{{e.base}}</p></div>
            <div class="gey">{{e.personPercent}}</div>
            <div class="gey">{{e.personAmount}}</div>
            <div class="gey">{{e.companyPercent}}</div>
            <div class="gey">{{e.companyAmount}}</div>
          </div>
          <div class="total">
            <div>
              个人累计部分
              <p>{{data.personAmount}}</p>
            </div>
            <div>
              企业累计部分
              <p>{{data.companyAmount}}</p>
            </div>
            <div>
              总缴纳
              <p>{{(data.personAmount + data.companyAmount).toFixed(2)}}</p>
            </div>
          </div>
        </div>
        <div id="intro" v-for="intro in intros">
            <div>{{intro.title}}</div>
            <div :style="{'background-image': 'url('+ intro.img +')'}"></div>
            <div>
                <p v-for="text in intro.text" :key="text">{{text}}</p>
            </div>
            <router-link :to="intro.link" tag="div">{{intro.btn}}</router-link>
        </div>
        <div id="ad">
            <div>他们都在使用</div>
            <div></div>
            <div>他们都在用爱员工<br>他们都在用爱员工他们都在用爱员工</div>
        </div>
        <div id="msg">
            <lslide :height="8.4">
                <litem name="最新资讯">
                    <Sitem v-for="msg in zx" :key="msg.img" :msg="msg"/>
                    <more url="/news/"/>
                </litem>
                <litem name="常见问题">
                    <div style="height: 0.3rem"></div>
                    <Aitem v-for="msg in ques" :key="msg.img" margin="0 0 0.3rem" :msg="msg"/>
                    <more url="/zt/"/>
                </litem>
            </lslide>
        </div>
    </div>
</template>
<script>
import Area from "../public/Area";
import lslide from "../public/LSlide_cs";
import litem from "../public/Litem";
import Sitem from "../public/Sitem";
import Aitem from "../public/Aitem"
import more from "../public/More"
import { Get, Post, Port } from "../../../server/ajax";
import { Toast, Indicator } from 'mint-ui';
export default {
  data() {
    return {
      citys: {
        beijingshi: { name: "北京市" },
        bijieshi: { name: "毕节市" },
        changchunshi: { name: "长春市" },
        changzhoushi: { name: "常州市" },
        changshashi: { name: "长沙市" },
        chongzuoshi: { name: "崇左市" },
        chongqingshi: { name: "重庆市" },
        chengdushi: { name: "成都市" },
        dalianshi: { name: "大连市" },
        dongguanshi: { name: "东莞市" },
        dingxishi: { name: "定西市" },
        fuzhoushi: { name: "抚州市" },
        foshanshi: { name: "佛山市" },
        guangzhoushi: { name: "广州市" },
        guilinshi: { name: "桂林市" },
        guiyangshi: { name: "贵阳市" },
        hengshuishi: { name: "衡水市" },
        haerbinshi: { name: "哈尔滨市" },
        hangzhoushi: { name: "杭州市" },
        huzhoushi: { name: "湖州市" },
        hefeishi: { name: "合肥市" },
        huizhoushi: { name: "惠州市" },
        heyuanshi: { name: "河源市" },
        hechishi: { name: "河池市" },
        haikoushi: { name: "海口市" },
        jianshi: { name: "吉安市" },
        jinanshi: { name: "济南市" },
        jiningshi: { name: "济宁市" },
        jieyangshi: { name: "揭阳市" },
        kaifengshi: { name: "开封市" },
        kunmingshi: { name: "昆明市" },
        langfangshi: { name: "廊坊市" },
        lianyungangshi: { name: "连云港市" },
        liuanshi: { name: "六安市" },
        laiwushi: { name: "莱芜市" },
        liaochengshi: { name: "聊城市" },
        laibinshi: { name: "来宾市" },
        lijiangshi: { name: "丽江市" },
        lanzhoushi: { name: "兰州市" },
        maanshanshi: { name: "马鞍山市" },
        nanjingshi: { name: "南京市" },
        nantongshi: { name: "南通市" },
        ningboshi: { name: "宁波市" },
        nanningshi: { name: "南宁市" },
        nanchongshi: { name: "南充市" },
        panjinshi: { name: "盘锦市" },
        pingdingshanshi: { name: "平顶山市" },
        qinhuangdaoshi: { name: "秦皇岛市" },
        qingdaoshi: { name: "青岛市" },
        qingyuanshi: { name: "清远市" },
        qianxinanzhou: { name: "黔西南州" },
        rizhaoshi: { name: "日照市" },
        shijiazhuangshi: { name: "石家庄市" },
        shenyangshi: { name: "沈阳市" },
        shanghaishi: { name: "上海市" },
        suzhoushi: { name: "苏州市" },
        sanmenxiashi: { name: "三门峡市" },
        shiyanshi: { name: "十堰市" },
        shaoguanshi: { name: "韶关市" },
        shenzhenshi: { name: "深圳市" },
        shantoushi: { name: "汕头市" },
        sanyanshi: { name: "三亚市" },
        tianjinshi: { name: "天津市" },
        tangshanshi: { name: "唐山市" },
        taiyuanshi: { name: "太原市" },
        taizhoushi: { name: "台州市" },
        taianshi: { name: "泰安市" },
        wuxishi: { name: "无锡市" },
        wenzhoushi: { name: "温州市" },
        weifangshi: { name: "潍坊市" },
        weihaishi: { name: "威海市" },
        wuhanshi: { name: "武汉市" },
        xiamenshi: { name: "厦门市" },
        xinyvshi: { name: "新余市" },
        xianshi: { name: "西安市" },
        xiningshi: { name: "西宁市" },
        yueyangshi: { name: "岳阳市" },
        yizhoushi: { name: "益州市" },
        yongzhoushi: { name: "永州市" },
        zhangjiakoshi: { name: "张家口市" },
        zhengzhoushi: { name: "郑州市" },
        zhuhaishi: { name: "珠海市" },
        zhanjiangshi: { name: "湛江市" },
        zhaoqingshi: { name: "肇庆市" },
        zhongshanshi: { name: "中山市" },
        ziyangshi: { name: "资阳市" }
      },
      intros: [
        {
          title: "企业在线社保购买系统",
          img: require("../../assets/shebao/img_0.png"),
          text: [
            "全国385个城市落地服务商",
            "异地员工社保一键搞定",
            "平台推荐各地最优质的落地服务商",
            "提高hr日常效率，减少人力成本",
            "数据全程加密，保证信息安全"
          ],
          btn: "马上使用",
          link: "/consult/1/账号注册"
        },
        {
          title: "全国社保服务商系统",
          img: require("../../assets/shebao/img_1.png"),
          text: [
            "人力资源服务商对接系统，全国",
            "385个城市落地服务商共同协作",
            "一个平台385个网点，减低自建",
            "网点交付成本",
            "纯线上操作提高人工效率"
          ],
          btn: "马上注册使用",
          link: "/consult/1/账号注册"
        }
      ],
      // iscpf: true,
      able: this.area == "shanghaishi",
      zx: null,
      ques: null,
      para: {
        iscpf: 1,
        insuranceBase : null,
        cpfBase: null,
        householdTypeId: 1
      },
      data: null,
      insuranceBaseMin: 0,
      insuranceBaseMax: 0,
      cpfBaseMin: 0,
      cpfBaseMax: 0,
    };
  },
  props: ["area"],
  components: {
    Area,
    lslide,
    litem,
    Sitem,
    Aitem,
    more
  },
  methods: {
    tiscpf() {
      if (!this.able) {
        if(this.para.iscpf == 1){
          this.para.iscpf = 0
        }
        else{
          this.para.iscpf = 1
        }
      }
    },
    prov(e){
      this.para.prov = e.id
    },
    city(e){
      if(e.name == ''){
        this.para.cityId = null
        Toast('暂无对应方案！')
        return
      }
      this.para.cityId = e.id
      if(e.name != '上海市'){
        this.able = false
      }
      else{
        this.para.iscpf = 1
        this.able = true
      }
      this.getRange()
    },
    house(e){
      this.para.householdTypeId = e
      this.getRange()
    },
    calc() {
      if(!this.para.cityId){
        Toast('暂无对应方案！')
        return
      }
      this.para.insuranceBase = this.para.insuranceBase - 0
      this.para.cpfBase = this.para.cpfBase - 0
      if(!this.para.insuranceBase || this.para.insuranceBase < this.insuranceBaseMin || this.para.insuranceBase > this.insuranceBaseMax){
        Toast('五险一金基数输入不正确！')
        return
      }
      if(this.para.iscpf && (!this.para.cpfBase || this.para.cpfBase < this.cpfBaseMin || this.para.cpfBase > this.cpfBaseMax)){
        Toast('公积金基数输入不正确！')
        return
      }
      Indicator.open('计算中...')
      Post(`${Port}/cms/api/grsb_count`, this.para, function(data){
        this.data = data
        Indicator.close()
        setTimeout(function(){
          if(this.$parent.$parent.$el.children) this.$parent.$parent.footTop = this.$parent.$parent.$el.children[2].offsetTop
        }.bind(this), 10)
      }.bind(this))
    },
    getRange() {
      Post(`${Port}/cms/api/city_info`, {
        cityId: this.para.cityId,
        householdTypeId: this.para.householdTypeId
      }, function(data){
        this.insuranceBaseMin = data.insuranceBaseMin
        this.insuranceBaseMax = data.insuranceBaseMax
        this.cpfBaseMin = data.cpfBaseMin
        this.cpfBaseMax = data.cpfBaseMax
      }.bind(this))
    }
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.zx = data
    }.bind(this))
    Post(`${Port}/mobile/cms/subjects`, {
      page_size: 2
    }, function(data) {
      this.ques = data
    }.bind(this))
  },
  activated() {
    setTimeout(function(){
      this.$parent.$parent.updata();
    }.bind(this), 10)
  }
};
</script>
<style scoped>
#head {
  height: 6.16rem;
  padding-top: 2.4rem;
  background-image: url("~@/assets/scounter/banner.png");
  background-size: cover;
  text-align: center;
}
#head > div:nth-child(1) {
  font-size: 0.42rem;
  color: #fff;
}
#head > div:nth-child(2) {
  display: inline-block;
  font-size: 0.28rem;
  color: #ed5172;
  height: 0.64rem;
  width: 2.1rem;
  line-height: 0.64rem;
  border-radius: 0.32rem;
  border: 0.01rem solid #ed5172;
  margin-top: 0.5rem;
}
#counter {
  padding-top: 1.5rem;
}
#counter > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  text-align: center;
  /* font-weight: bold; */
}
input {
  display: block;
  width: 6.9rem;
  margin: 0.38rem auto 0;
  height: 1.1rem;
  border: 0.01rem solid #ccc;
  font-size: 0.32rem;
  line-height: 1.1rem;
  text-indent: 0.4rem;
  color: #333;
}
.tip {
  font-size: 0.28rem;
  color: #999;
  margin: 0.2rem 0.3rem 0;
}
.iscpf {
  font-size: 0.28rem;
  color: #666;
  text-align: right;
  margin: 0.3rem 0.3rem 0.4rem;
  width: 2.5rem;
  float: right;
}
.iscpf::before {
  content: "";
  display: inline-block;
  width: 0.33rem;
  height: 0.33rem;
  background-size: cover;
  border: 0.01rem solid #ed5172;
  float: left;
}
.checked::before {
  background-image: url("~@/assets/scounter/checked.png");
}
.able::before {
  filter: grayscale(1);
}
.calc {
  height: 1rem;
  width: 6.9rem;
  margin: 1rem auto 0;
  text-align: center;
  color: #fff;
  font-size: 0.39rem;
  line-height: 1rem;
  background-color: #ed5172;
  letter-spacing: 0.04rem;
  clear: both;
}
#intro {
  text-align: center;
  margin: 1.2rem 0;
}
#intro > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#intro > div:nth-child(2) {
  margin-top: 0.5rem;
  height: 2.5rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#intro > div:nth-child(3) {
  margin-top: 0.8rem;
  font-size: 0.28rem;
  color: #999;
}
#intro > div:nth-child(4) {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: 0.28rem;
  color: #ed5172;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.29rem;
  border: 0.01rem solid #ed5172;
  margin-top: 1rem;
}
#ad {
  height: 6.9rem;
  padding-top: 1.6rem;
  text-align: center;
  background-color: #f4f5f7;
}
#ad > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#ad > div:nth-child(2) {
  height: 1.6rem;
  margin-top: 0.6rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/shebao/ad.png");
}
#ad > div:nth-child(3) {
  margin-top: 0.4rem;
  font-size: 0.28rem;
  color: #999;
}
#result {
  padding: 1.4rem 0.3rem 1.6rem;
  background-color: #f4f5f7;
  margin-top: 1rem;
}
#result > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
.ritem {
  display: flex;
  justify-content: space-around;
  margin-top: 0.5rem;
}
.ritem > div {
  font-size: 0.24rem;
  color: #666;
  line-height: 0.32rem;
  text-align: center;
  width: 1.1rem;
}
.gey {
  color: #999;
}
.total {
  display: flex;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #666;
  text-align: center;
  margin-top: 1.05rem;
}
.total p {
  color: #f15e81;
  margin-top: 0.45rem;
}
</style>